<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<script src="../js/step.js"></script>
	</head>
	<body>
		<h3>Steps步骤条</h3>
		<h4>基本样式</h4>
		<section>
			<div class="example">
				<ul class="steps">
				    <li class="step step-current">
				        <div class="step-tail"></div>
				        <div class="step-main">
				            <span class="step-number">1</span>
				            <span class="step-name">First Step</span>
				        </div>
				    </li>
				    <li class="step">
				        <div class="step-tail"></div>
				        <div class="step-main">
				            <span class="step-number">2</span>
				            <span class="step-name">Second Step</span>
				        </div>
				    </li>
				    <li class="step">
				        <div class="step-main">
				            <span class="step-number">3</span>
				            <span class="step-name">Last Step</span>
				        </div>
				    </li>
				</ul>
			</div>
			<pre><code>
	&lt;ul class="steps"&gt;
	    &lt;li class="step step-current"&gt;
	        &lt;div class="step-tail"&gt;&lt;/div&gt;
	        &lt;div class="step-main"&gt;
	            &lt;span class="step-number"&gt;1&lt;/span&gt;
	            &lt;span class="step-name"&gt;First Step&lt;/span&gt;
	        &lt;/div&gt;
	    &lt;/li&gt;
	    &lt;li class="step"&gt;
	        &lt;div class="step-tail"&gt;&lt;/div&gt;
	        &lt;div class="step-main"&gt;
	            &lt;span class="step-number"&gt;2&lt;/span&gt;
	            &lt;span class="step-name"&gt;Second Step&lt;/span&gt;
	        &lt;/div&gt;
	    &lt;/li&gt;
	    &lt;li class="step"&gt;
	        &lt;div class="step-main"&gt;
	            &lt;span class="step-number"&gt;3&lt;/span&gt;
	            &lt;span class="step-name"&gt;Last Step&lt;/span&gt;
	        &lt;/div&gt;
	    &lt;/li&gt;
	&lt;/ul&gt;
			</code></pre>
		</section>

		<h4>API</h4>
		<section>
			<div class="example">
				<ul class="steps" id="my-step">
				    <li class="step step-current">
				        <div class="step-tail"></div>
				        <div class="step-main">
				            <span class="step-number">1</span>
				            <span class="step-name">First Step</span>
				        </div>
				    </li>
				    <li class="step">
				        <div class="step-tail"></div>
				        <div class="step-main">
				            <span class="step-number">2</span>
				            <span class="step-name">Second Step</span>
				        </div>
				    </li>
				    <li class="step">
				        <div class="step-main">
				            <span class="step-number">3</span>
				            <span class="step-name">Last Step</span>
				        </div>
				    </li>
				</ul>
				<br>
				<div>
					<span class="btn-light btn-default btn-medium" onClick="pre()">上一步</span>
					<span class="btn-light btn-default btn-medium" onClick="next()">下一步</span>
					<span class="btn-light btn-default btn-medium" onClick="first()">第一步</span>
					<span class="btn-light btn-default btn-medium" onClick="last()">最后一步</span>
				</div>
			</div>
			<pre class="javascript"><code>
	// 到上一步
	$('#my-step').step('pre');

	// 到下一步
	$('#my-step').step('next');

	// 到第一步
	$('#my-step').step('first');

	// 到最后一步
	$('#my-step').step('last');
			</code></pre>
		</section>

		<script>
		  $(document).ready(function() {
		    $('pre code').each(function(i, block) {
		      hljs.highlightBlock(block);
		    });
		  });
		  function pre() {
		  	$('#my-step').step('pre');
		  }
		  function next() {
		  	$('#my-step').step('next');
		  }
		  function first() {
		  	$('#my-step').step('first');
		  }
		  function last() {
		  	$('#my-step').step('last');
		  }
		</script>
	</body>
</html>